#dropsOfWater {
  position:absolute;
  top: 0px;
  left: 0px;

  width: 200px;
  height: 200px;    
  
  z-index: 0;
  /* 穿透层级 */
  pointer-events: none;
  
}
#dropsOfWater .wave{
  position:absolute;  
    
}
#dropsOfWater .wave0{
  z-index:2;
  animation:w 1s forwards;
}
#dropsOfWater .wave1{
  z-index:3;     
  animation:w 1.1s .2s forwards;
}
#dropsOfWater .wave2{
  z-index:4;
  animation:w 1.2s .4s forwards;
}
@keyframes w{
  0%{
    top:calc((100% - 10px)/2);
    left:calc((100% - 10px)/2);
    width:10px;
    height:10px;
    border-radius:200px;
    
  }
  100%{
    top:calc((100% - 200px)/2);
    left:calc((100% - 200px)/2);
    width:200px;
    height:200px;
    border-radius:200px;
    background-color: rgba(0, 0, 0, 0);
  }
}